<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style type="text/css">
			.mui-bar-nav~.mui-content{padding-bottom: 50px;}
			.bg-ICBC{}
			.ccard *,header *{}			
			.ccard {position: relative;}
			.ccard-bank{}
			.ccard-bank .icon{font-size: 1.8em;}
			.ccard-btn{padding: 15px 0;}
			.ccard-date{}
			.ccard-amount{padding: 15px 0 5px;;}
			.ccard-bg{position: absolute;right: -20px;top: -20px;font-size: 9em;z-index: 0;opacity: .03;}
			
			.summary > div{padding: 5px 0;}
			.item > div{padding: 3px 0;}
			.item .icon-success1{color:#11CD6E}
			.item .icon-waitpay{color:#F14E11}
			.pay{color: #999;}
			.text-pay{padding-left: 2em;}
			.btn-pay{border-width: 0;border-radius: 0;height:50px;font-size: 1.1em;text-align: center;}
			nav.mui-bar-tab{padding-right: 10px;}
			nav .mui-btn-outlined{color: inherit;}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bg-ICBC">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="txtCardName"></h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded action-status color-blue">
				<span class="mui-icon iconfont" :class="resources.GetRepaymentPlanItemStatusClassByValue(plan.Status)"></span> <span v-text="resources.GetRepaymentPlanStatusTextByValue(plan.Status)"></span>
			</div>			
			<div class="mui-table-view ccard bg-ICBC nohover">
				<div class="mui-table-view-cell">
					<div class="mui-grid-view mui-table ccard-btn">
						<div class="mui-table-cell mui-col-xs-8">
							<div class="mui-h5">当前已还</div>
							<div class="mui-h2 pt-10" v-text="total"> 
								0.00
							</div>
						</div>
					</div>
					<div class="mui-grid-view mui-table ccard-amount">
						<div class="mui-table-cell mui-col-xs-3">
							<p>需还款</p>
							<p v-text="plan.BillingAmount.toFixed(2)">0.00</p>
						</div>
						<div class="mui-table-cell mui-col-xs-3">
							<p>还款数</p>
							<p v-text="plan.Quantity">0</p>
						</div>
						<div class="mui-table-cell mui-col-xs-3">
							<p>保证金</p>
							<p v-text="plan.RepaymentAmount.toFixed(2)">0.00</p>
						</div>
						<div class="mui-table-cell mui-col-xs-3">
							<p>手续费</p>
							<p v-text="plan.Fee.toFixed(2)">0.00</p>
						</div>
					</div>
					<div class="ccard-bg">
						<svg class="icon text-middle" aria-hidden="true">
							<use xlink:href="#icon-ICBC"></use>
						</svg>
					</div>
				</div>
			</div>
			<ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">	
				<li class="mui-table-view-cell mui-h5">
					<span v-text="plan.BeginDate"></span> 至 <span v-text="plan.EndDate"></span>	
				</li>
		        <li class="mui-table-view-cell item" v-for="item in items">
		        	<div class="mui-row">
						<div class="mui-col-xs-5">快速还款 <span v-text="item.Amount">0.00</span></div>
						<div class="mui-col-xs-7 mui-text-right"><span v-text="item.ActionTime"></span> <span class="mui-icon iconfont" :class="item.Status==resources.RepaymentPlanStatusText.Runed ? 'icon-success1' : 'icon-waitpay'"></span></div>
					</div>
					<div class="mui-row pay" v-for="pay in item.Pays">
						<div class="mui-col-xs-5 text-pay">消费 <span v-text="pay.Amount">0.00</span></div>
						<div class="mui-col-xs-7 mui-text-right"><span v-text="pay.ActionTime"></span> <span class="mui-icon iconfont" :class="pay.Status==resources.RepaymentPlanStatusText.Runed ? 'icon-success1' : 'icon-waitpay'"></span></div>
					</div>
		        </li>
		 	</ul>	  	
		</div>
		<nav class="mui-bar mui-bar-tab mui-text-right text-middle">
				<button id="btnStop" type="button" class="mui-btn mui-btn-grey mui-btn-outlined">停止计划</button>
		</nav>
		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/resources.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/iconfont.js"></script>
		<script type="text/javascript">
			mui.init();
			
			var id = null;
			
			$id("btnStop").addEventListener("tap", function () {
				mui.confirm("确定要停止当前还款计划吗？", function (e) {
					if(e.index == 1){
						
					}
				})
			})
			
			init = function () {
				var wv = plus.webview.currentWebview();
				var data = wv.data;
				var card = wv.card;
				console.log(JSON.stringify(data));
				id = data.ID; 
				
				$id("txtCardName").innerText = formatBankCardShow(card);
				
				var vm = new Vue({
					el: '.mui-content',
					data: {
						'plan': data,
						'items': [],
						'RepayedAmount': 0.00
					},
					created: function() {
						this.$nextTick(function() {
							this.ajax();
						})
					},
					computed: {
						total: function(){
				            var total = 0;
				            this.items.map(function (item) {
				            	if(item.Status==resources.RepaymentPlanStatusText.Runed){
				            		total += item.Amount;
				            	}
				            });
				            return total.toFixed(2);
				        }
					},
					methods: {
						ajax: function() {
							var _self = this;
							
							mui.showLoading();
							app.post('GetRepaymentPlanItems', {ID:id}, function(data) {
								_self.items = data.data;
								console.log(JSON.stringify(data.data));
							});
						},
						openItem: function(data) {
							mui.openWindow({url:"ccard-plan-item.html", id:"ccard-plan-item.html", extras:{data:data}});
						}
					}
				});
			}
			
			mui.plusReady(function () {
				init();
			})
		</script>
	</body>

</html>